<template>
  <div class="login-box">
    <div class="login-ui">
      <h3>登 录</h3>
      <p>
        <el-input v-model="loginData.username" clearable placeholder="请输入用户名">
          <i slot="prefix" style="font-size:18px;" class="el-input__icon el-icon-user"></i>
        </el-input>
      </p>
      <p>
        <el-input v-model="loginData.password" :type="showPassWord?'text':'password'" placeholder="请输入密码">
          <i slot="prefix" style="font-size:18px;" class="el-input__icon el-icon-lock"></i>
          <i slot="suffix" style="font-size:18px;" class="el-input__icon el-icon-view" title="显示明文" :style="{cursor:'pointer',color:showPassWord?'#2fdab2':''}" @click="showPassWord=!showPassWord"></i>
        </el-input>
      </p>
      <el-button style="width:100%" type="primary" @click="login">登录</el-button>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      showPassWord: false,
      loginData: {
        username: '1474425700',
        password: 'qingeniubi666'
      }
    }
  },
  methods: {
    login() {
      this.$API.login(this.loginData).then((res) => {
        if (res.code == 0) {
          this.$store.commit('SET_USERINFO', res.data)
          this.$router.push({ name: 'Home' })
        }
        this.$message({
          showClose: true,
          message: res.msg,
          type: res.code == 0 ? 'success' : 'error'
        })
      })
    }
  }
}
</script>

<style lang="less" scoped>
.login-box {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
}
.login-ui {
  border-radius: 10px;
  width: 300px;
  padding: 10px 30px;
  height: 250px;
  text-align: center;
  background: #fff;
  p{
    padding:10px;
  }
  //   margin: 0 auto;
}
</style>